import React, { useEffect, useRef, useState } from 'react';
import banner from '@/config/img/banner.png';
import { qiyuanList, aboutMe, peo, workList, zuo, you } from './index.config';
import Title from '../component/Title';
import { useHistory } from 'umi';
import { CSSTransition } from 'react-transition-group';
import 'animate.css';
import './index.less';
export default function index() {
  const history = useHistory();
  const [page, setPage] = useState(0);
  const [isVisible, setIsVisible] = useState(false);
  const [showAbout, setShowAbout] = useState(false);
  let maxPage = aboutMe.length - 4;
  const toLeft = () => {
    if (page == maxPage) return;
    let newPage = page + 1;
    setPage(newPage);
  };
  const toRight = () => {
    if (page == 0) return;
    let newPage = page - 1;
    setPage(newPage);
  };
  const clickMore = (val: any) => {
    history.push(val.path);
  };

  const handleScroll = () => {
    const scrollPosition = window.scrollY;
    console.log(scrollPosition);

    scrollPosition > 120 && setIsVisible(true);
    scrollPosition > 600 && setShowAbout(true);
  };
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  return (
    <div className="home-page">
      <div className="banner">
        <img src={banner} alt="" />
      </div>
      <CSSTransition
        in={isVisible} // 控制动画是否开始，true 表示开始动画
        timeout={3000} // 动画过渡的时间，单位毫秒
        classNames="fade" // 指定动画的 class 名称
        unmountOnExit // 动画退出时卸载组件
      >
        <div className="history" key="amache">
          {qiyuanList.map((val) => {
            return (
              <div className="history-item">
                <div className="history-item-title">{val.title}</div>
                <img src={val.icon} alt="" />
                <div className="desx">{val.desc}</div>
                <div className="button">
                  <div className="button-text" onClick={() => clickMore(val)}>
                    更多
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </CSSTransition>
      <CSSTransition
        in={showAbout} // 控制动画是否开始，true 表示开始动画
        timeout={3000} // 动画过渡的时间，单位毫秒
        classNames="about" // 指定动画的 class 名称
        unmountOnExit // 动画退出时卸载组件
      >
        <div className="about-me">
          <Title title="关于雷剧" enTitle="About Thunder Drama"></Title>
          <div className="about-me-list">
            <div
              className="left"
              onClick={() => {
                toLeft();
              }}
            >
              <img src={zuo} alt="" />
            </div>
            <div className="list-content">
              <div
                className="list"
                style={{
                  transform: `translateX(-${page * 246}px)`,
                }}
              >
                {aboutMe.map((val) => {
                  return (
                    <div className="list-item">
                      <img src={val.icon} alt="" />
                      <div className="list-item-title">{val.title}</div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div
              className="right"
              onClick={() => {
                toRight();
              }}
            >
              <img src={you} alt="" />
            </div>
          </div>
        </div>
      </CSSTransition>
      <div className="pero">
        <Title
          title="著名雷剧演员"
          enTitle="Famous thunder drama actor"
        ></Title>
        <div className="pero-content">
          <div className="content-inst">
            {peo.map((val) => {
              return (
                <div className="content-item">
                  <div className="item-title">
                    <div className="name">{val.title}</div>
                    <div className="time">{val.time}</div>
                  </div>
                  <img src={val.src} alt="" />
                  <div className="works">{val.works}</div>
                  <div className="desc">{val.desc}</div>
                  <div className="button-text">更多相关</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="work">
        <Title
          title="著名雷剧作品"
          enTitle="Famous thunder opera works"
        ></Title>
        <div className="work-content">
          <div className="content-ins">
            {workList.map((val) => {
              return (
                <div className="work-item">
                  <div className="work-item-title">{val.title}</div>
                  <img src={val.src} alt="" />
                  <div className="desc">{val.desc}</div>
                  <div className="botton-text">更多相关</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
